<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="filter-container">
      <el-select style="width: 220px" v-model="query.cust_id" filterable remote :remote-method="getcustomerOptions"
        class="filter-item" placeholder="请选择客户" clearable>
        <el-option v-for="i in customerOptions" :key="i.id" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-select v-model="query.group_id" class="filter-item" placeholder="请选择工序" clearable filterable>
        <el-option v-for="i in groupOptions" :key="i.id" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-input style="width: 300px" placeholder="输入物料查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.key_part_no"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading"
        v-permission="'maBarcode.export'">导出</el-button>
      <el-button type="primary" v-show=" row.is_common==0" class="filter-item" @click="createItem">
        新增
      </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'maBarcode',
  props: {
    row: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data: function () {
    return {
      api: this.$api.barcoderuleusage,
      apiCreate: this.$api.barcoderuleusage + 'modify',
      apiEdit: this.$api.barcoderuleusage + 'modify',
      name: '物料条码规则',
      columns: [
        { title: '料号', key: 'key_part_no', width: 160 },
        { title: '物料名称', key: 'key_part_name' },
        { title: '客户编码', key: 'cust_code', width: 120 },
        { title: '客户名称', key: 'cust_name', width: 140 },
        { title: '工序名称', key: 'group_name', width: 140 },
        { title: '备注', key: 'remarks', width: 120 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        {
          title: '物料',
          key: 'sku_id',
          name: 'select',
          options: [],
          required: true,
          props: {
            clearable: true,
            filterable: true,
            remote: true,
            remoteMethod: null,
            placeholder: '输入物料搜索',
          },
        },
        {
          title: '客户',
          key: 'cust_id',
          name: 'select',
          options: [],
          props: { clearable: true, filterable: true, remote: true, 'remote-method': this.getcustomerOptions },
        },
        {
          title: '工序',
          key: 'group_id',
          name: 'select',
          span: 16,
          requried: true,
          options: [],
          props: {
            clearable: false,
            filterable: true,
          },
        },
        { title: '备注', key: 'remarks', span: 24, name: 'textarea' },
      ],
      query: {
        cust_id: null,
        key_part_no: null,
      },
      tableProps: {
        border: true,
        opsColWith: 80,
        hideOperations: false,
      },
      formProps: {
        dialogWidth: '70%',
        labelWidth: '120px',
      },
      customerOptions: [],
      groupOptions: [],
      barcodeRuleOptions: [],
      mappingLevel: {},
      ruleId: '',
    }
  },
  methods: {
    // 客户远程搜索
    async getcustomerOptions(val) {
      this.$request(this.$api.custom + 'getlist', { page: 1, size: 100, queryString: val ? val : '' }).then((r) => {
        this.customerOptions = r.list.map((i) => ({
          label: `${i.cust_code} ${i.cust_name}`,
          value: i.id,
        }))
      })
      this.getFieldConfig('cust_id').options = this.customerOptions
    },
    formatQuery(query) {
      let query1 = { ...query, barcode_rule_id: this.ruleId }
      return query1
    },
    formatList(list) {
      //依据实际需求处理
      list.forEach((v) => {
        v.barcode_level = this.mappingLevel[v.barcode_level]
      })
      return list
    },
    formatAfterGet(data) {
      //依据实际需求处理
      this.singleMatOptions(data.sku_id)
      return data
    },
    getMatOptions(query) {
      if (query) {
        this.$request(this.$api.mat + 'getmatandsku', { queryString: query })
          .then((r) => {
            this.setFieldOptions('sku_id', r, 'id', ['key_part_no', 'key_part_name'])
          })
          .catch(() => {})
      } else {
        this.setFieldOptions('sku_id', [])
      }
    },
    singleMatOptions(id) {
      if (id) {
        this.$request(this.$api.mat + 'getmatandsku', { id: id })
          .then((r) => {
            this.setFieldOptions('sku_id', r, 'id', ['key_part_no', 'key_part_name', 'key_part_desc'])
          })
          .catch(() => {})
      } else {
        this.setFieldOptions('sku_id', [])
      }
    },
    getList2(callback) {
      this.pageLoading = true
      this.$request(this.$api.barcodeRule + 'detailgetlist', { rule_id: this.ruleId })
        .then((r) => {
          this.pageLoading = false
          if (callback) {
            callback(r)
          }
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    createItem() {
      if (!this.ruleId) {
        this.$message({
          message: '维护条码明细，必须先点击选中条码规则',
          type: 'error',
        })
        return
      }
      let that = this
      this.getList2(function (r) {
        if (r.list.length > 0) {
          that.data = { barcode_rule_id: that.ruleId }
          that.editFormVisible = true
        } else {
          that.$message({
            message: '请先维护条码规则明细。',
            type: 'error',
          })
        }
      })
    },
  },

  watch: {
    row: {
      deep: true,
      immediate: true,
      handler(val, old) {
        this.ruleId = val.id
        this.getList()
      },
    },
  },
  created: function () {
    this.research()
    this.getFieldConfig('sku_id').props.remoteMethod = this.getMatOptions
    this.$request(this.$api.custom + 'getlist', { page: 1, size: 999 }).then((r) => {
      this.customerOptions = this.arrayOptions(r.list, 'id', ['cust_code', 'cust_name'])
      this.getFieldConfig('cust_id').options = this.customerOptions
    })
    this.$request(this.$api.group + 'getlistbypage', { page: 1, size: 999 }).then((r) => {
      this.groupOptions = this.arrayOptions(r.list, 'id', ['group_name'])
      this.getFieldConfig('group_id').options = this.groupOptions
    })
  },
}
</script>
<style scoped>
</style>
